<template>
  <div class="wrapper">
    <textarea class="textarea" v-model="htmlValue" placeholder="请输入HTML..."></textarea>
    <button @click="html2String">HTML to String</button>
    <textarea class="textarea" v-model="result" placeholder="转换结果"></textarea>
  </div>
</template>

<script>
export default {
  data () {
    return {
      htmlValue: '',
      result: '',
      resultHtml: ''
    }
  },
  methods: {
    html2String () {
      this.result = this.htmlValue.replace(/(\r\n)|(\n)/g, '\\n').replace(/"/g, '\\"')
      this.resultHtml = this.result
    }
  }
}
</script>

<style lang="css" scoped>
.wrapper {
  overflow: hidden;
  zoom: 1;
  text-align: center;
}
.textarea {
  width: 40%;
  height: 450px;
  margin: 1rem;
  vertical-align: middle;
}
</style>
